<template>
	<view class="">
		<view class="w-full">
			<div style="height: 500rpx;" class="bgSty">
				<div class="w-full h-full" v-if="tabIndex == 0 && item.buy_videos">
					<video class="w-full h-full" :src="image_handle(item.buy_videos)" mode="aspectFill"></video>
				</div>
				<swiper class="h-full" v-if="tabIndex == 1">
					<swiper-item v-for="pic in item.shop_image.split(',')" :key="pic">
						<image class="w-full h-full" :src="image_handle(pic)" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</div>
			<div class="back" @click="back">
				<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
			</div>
			<view class="cardBox">
				<view class="cardBlueBg">
					<div class="between pt-30" style="align-items: flex-start;">
						<h3 class="">{{ lang == 'zh' ? item.username : item.username_ru }}</h3>
						<div class="flex text-white media-tab flex-shrink-0 ml-20">
							<div class="item" :class="{ active: tabIndex == 0 }" @click="tabIndex = 0"
								v-if="item.buy_videos">{{$t('视频')}}</div>
							<div class="item" :class="{ active: tabIndex == 1 }" @click="tabIndex = 1"
								v-if="item.shop_image">{{$t('图片')}}</div>
						</div>
					</div>
					<view class="flex-start">
						<block v-if="item.level != 0">
							<image src="../../static/img/glodBusi.png" mode="" class="img1 ml-30"></image>
							<image src="../../static/img/vipNum.png" mode="" class="img2 ml-10"></image>
						</block>
						<p class="ml-20 mb-30">{{$t('综合评分')}}: {{ item.rating }}</p>
						<p class="ml-30 mb-30">{{$t('车辆数')}}: {{ item.car_count }}</p>
						<p class="ml-30 mb-30">{{$t('关注数')}}: {{ item.guanzhu_count }}</p>
					</view>

					<view class="cardYellowBg">
						<view class="evenly pt-28">
							<view class="w-125 text-center">
								<p class="numSty">{{ item.receiving_order_num }}</p>
								<p class="mt-20 titleSty">{{$t('接单量')}}</p>
							</view>
							<view class="w-125 text-center">
								<p class="numSty">{{ item.rating }}</p>
								<p class="titleSty mt-20">{{$t('综合评分')}}</p>
							</view>
							<view class="w-125 text-center">
								<p class="numSty">{{ item.is_bond }}</p>
								<p class="titleSty mt-20">{{$t('保证金')}}(万元)</p>
							</view>
						</view>
						<view class="evenly pt-28">
							<view class="w-125 text-center">
								<p class="numSty">{{ item.goods_comment_rate }}%</p>
								<p class="titleSty mt-20">{{$t('好评率')}}</p>
							</view>
							<view class="w-125 text-center">
								<p class="numSty">{{ item.on_time_rate }}%</p>
								<p class="titleSty mt-20">{{$t('准时率')}}</p>
							</view>
							<view class="w-125 text-center">
								<p class="numSty">{{ item.accident_rate }}%</p>
								<p class="titleSty mt-20">{{$t('事故率')}}</p>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
		<!-- 公司简介 -->
		<view class="w-full bg-white rounded-26 busiIntro">
			<view class="p-35">
				<p class="fz28 text-111 font-bold">{{$t('公司简介')}}</p>
			</view>
			<p class="ml-35 mr-35 h-1 bg-1F"></p>
			<view class="fz24 text-555 mt-16 pb-16 ml-34 mr-26" style="height: 180rpx; overflow: scroll;">
				<!-- <u-read-more ref="uReadMore" @open="openRead" @close="closeRead" :toggle="true" showHeight="168"
					:shadowStyle="shadowStyle" closeText="" openText=""
					:class="{ readMoreSty: open == true || open == false, readMoreOpen: open == true }">
					<rich-text :nodes="item.profile"></rich-text>
				</u-read-more> -->
				<p class="text-555 lh-56">
					{{item.profile}}
				</p>
			</view>
		</view>
		<!-- 主营路线 -->
		<view class="mt-16 w-full bg-white rounded-26">
			<view class="p-35">
				<p class="fz28 text-111 font-bold">{{$t('主营路线')}}</p>
			</view>
			<p class="ml-35 mr-35 h-1 bg-1F"></p>
			<view class="mt-20">
				<view v-for="(it, ind) in item.luxian" :key="ind" class="evenly mt-15 text-center">
					<view class="cityBox center">
						<flag class="mr-6" :country="it.cfd.country" />
						<span class="fz24 text-333 font-bold ml-10">{{ it.cfd.name }}</span>
					</view>
					<image src="/static/icon/twoWayIcon.png" mode="" class="w-20 h-20"></image>
					<view class="cityBox center">
						<flag class="mr-6" :country="it.mdd.country" />
						<span class="fz24 text-333 font-bold ml-10">{{ it.mdd.name }}</span>
					</view>
				</view>
			</view>
			<u-empty v-if="item.luxian && item.luxian.length == 0" :text="$t('暂无主营路线')"></u-empty>
			<p class="watchMore" style="height: 10px;"></p>
		</view>
		<!-- 载具 -->
		<view class="mt-16 w-full bg-white rounded-26">
			<view class="evenly pt-30">
				<view v-for="(item, index) in cardList" class="cardSty" :class="{ activeCard: current == index }"
					@click="changeList(index)">
					<p style="position: relative;z-index: 9">{{ item }}</p>
					<p v-if="current == index" class="ativeLine"></p>
				</view>
			</view>
			<view v-if="current == 0" class="mt-38 pl-30 pr-30">
				<view class="flex-start">
					<p class="fz26 text-111 mt-5">{{$t('运输类型')}}</p>
					<view class="flex-start">
						<p class="kindTextSty ml-28" :class="barIndex == 0 ? 'lan' : ''" @click="clickCarTabar(0)">{{$t('不限')}}
						</p>
						<p class="kindTextSty ml-16" :class="barIndex == 2 ? 'lan' : ''" @click="clickCarTabar(2)">{{$t('公路')}}
						</p>
						<p class="kindTextSty ml-16" :class="barIndex == 5 ? 'lan' : ''" @click="clickCarTabar(5)">{{$t('铁路')}}
						</p>
						<p class="kindTextSty ml-16" :class="barIndex == 4 ? 'lan' : ''" @click="clickCarTabar(4)">{{$t('海运')}}
						</p>
						<p class="kindTextSty ml-16" :class="barIndex == 3 ? 'lan' : ''" @click="clickCarTabar(3)">{{$t('空运')}}
						</p>
					</view>
				</view>
				<view class=" w-full flex-start mt-40">
					<p class="fz26 text-111 mt-5 w-125">{{$t('载具类型')}}</p>
					<view class="flex-start carKindSty">
						<p class="kindTextSty" :class="columnsEmplType_id == 0 ? 'lan' : ''"
							@click="confirmEmplType(0)">{{$t('不限')}}
						</p>
						<p class="kindTextSty ml-16" :class="columnsEmplType_id == item.id ? 'lan' : ''"
							style="padding-left: 5px; padding-right: 5px;width: auto;" @click="confirmEmplType(item.id)"
							v-for="(item, index) in columnsEmplType">{{ item.label }}</p>
					</view>
				</view>
				<view class=" w-full between wrap mt-22">
					<view v-for="item in driverList" class="mt-16">
						<CarCard :carInfo="item" />
					</view>
				</view>
				<p class="watchMore" @click="car_more()">{{ car_more_text }}</p>
			</view>
			<view v-else-if="current == 1" class=" pb-34 mt-40">
				<view class="m-24 evenly">
					<button v-if="item.checked == true" v-for="(item, index) in advantageList"
						:class="{ common: item.checked == true || item.checked == false, checkedSty: item.checked == true }">
						{{ item.text }}
					</button>
				</view>
				<view class=" h-230 rounded-18 bg-F7 ml-34 mr-34" v-if="item.service_text">{{ item.service_text }}
				</view>
			</view>

			<view v-else-if="current == 2" class="pb-34 mt-40">
				<u-empty v-if="item.cost_image == ''" :text="$t('暂无收费标准')"></u-empty>
				<view class="m-24 flex-start" style="display: none;">
					<button v-for="(item, index) in chargeList" class="common">
						{{ item.text }}
					</button>
				</view>
				<view class="rounded-18 ml-34 mr-34 center" v-if="item.cost_image">
					<image @click="previewImage([IMAGE_URL + item.cost_image], IMAGE_URL + item.cost_image)"
						:src="IMAGE_URL + item.cost_image" mode="widthFix"></image>
				</view>
			</view>


			<view v-else-if="current == 3" class="mt-38 pl-30 pr-30">
				<view class="flex-start">
					<p class="fz26 text-111 mt-5">{{$t('仓库类型')}}</p>
					<view class="flex-start">
						<p class="kindTextSty ml-28" :class="stockIndex == 0 ? 'lan' : ''" @click="confirmStock(0)">{{$t('不限')}}
						</p>
						<p class="kindTextSty ml-16" :class="stockIndex == 1 ? 'lan' : ''" @click="confirmStock(1)">{{$t('保温')}}
						</p>
						<p class="kindTextSty ml-16" :class="stockIndex == 2 ? 'lan' : ''" @click="confirmStock(2)">{{$t('冷仓')}}
						</p>
						<p class="kindTextSty ml-16" :class="stockIndex == 3 ? 'lan' : ''" @click="confirmStock(3)">{{$t('堆场')}}
						</p>
					</view>
				</view>
				<view class=" w-full between mt-40">
					<p class="fz26 text-111 mt-5 w-140">{{$t('仓库位置')}}</p>
					<p class="fz22 text-888 ml-28">
						<city :value="siteCity" :is_all="true" @change="e => {
							siteCity = e.column3.value;
							siteCityLabel = e.column1.label + '-' + e.column2.label + '-' + e.column3.label;
							stock_lists({
								country_id: e.column1.value,
								province_id: e.column2.value,
								city_id: e.column3.value,
							})
						}">
							{{ siteCityLabel || $t('请选择') }}
						</city>
					</p>
				</view>
				<view class=" w-full between wrap mt-22">
					<view v-for="item in warehouseList" class="mt-16">
						<view>
							<image :src="IMAGE_URL + item.image" style="width: 330rpx;height: 286rpx;flex-shrink: 0;"
								mode="aspectFill">
							</image>
						</view>
						<view style="position:relative">
							<view class="infoSty">
								<view class="between pt-22 ml-22 mr-22">
									<p class="title">{{$t('类型')}}：</p>
									<p class="price">{{ item.brand }}</p>
								</view>
								<view class="between mt-22 ml-22 mr-22">
									<p class="title">{{$t('面积')}}：</p>
									<p class="price">{{ item.square }}</p>
								</view>
								<view class="between mt-22 ml-22 mr-22">
									<p class="title">{{$t('位置')}}：</p>
									<p class="price">{{ item.area.name }}</p>
								</view>
							</view>
						</view>
					</view>
				</view>
				<p class="watchMore" @click="warehouse_more()">{{ warehouse_more_text }}</p>
			</view>
			<view v-else-if="current == 4" class="pb-34 mt-40">
				<u-empty v-if="!item.ensure_text" class="py-50" :text="$t('暂无客户保障')"></u-empty>
				<!-- <view v-for="item in customServiceList" class="mt-16">
					<view class="customBlueBg">
						<p class="ml-30">{{item}}</p>
					</view>
					<view class="customDarkBg"></view>
				</view> -->
				<view class=" h-230 rounded-18 bg-F7 ml-34 mr-34 p-30" v-if="item.ensure_text">{{ item.ensure_text }}
				</view>

			</view>

		</view>

		<!-- 评价 -->
		<view class="mt-16 w-full bg-white rounded-26 pb-35">
			<view class="p-35">
				<p class="fz28 text-111 font-bold">{{$t('评价')}}</p>
			</view>
			<p class="ml-35 mr-35 h-1 bg-1F"></p>

			<block v-for="(item, index) in comments" class="mt-20">
				<view class="busiSty">
					<image :src="getImageUrl(item.member.avatar)" mode=""></image>
					<p>{{ lang == 'zh' ? item.member.username : item.member.username_ru }}</p>
				</view>
				<view class="flex-start ml-34 mt-25">
					<view class="" v-for="(it, ind) in scoreList" @click="checkStar(item, index)">
						<image v-if="it.num <= item.score" class="ml-8 mt-16 w-25 h-25"
							src="/static/img/starBright.png"></image>
						<image v-else class="ml-8 mt-16 w-25 h-25" src="/static/img/starDark.png"></image>
					</view>
				</view>
				<view class="flex-start wrap w-full mt-35 ml-15">
					<p v-for="it in item.brand" class="wordSty">
						{{ it.title }}
					</p>
				</view>
				<view class="ml-34 mt-10 mr-40 fz22 text-010 line-h40">
					{{ item.message.remark }}
				</view>
				<view v-if="item.message.img.length > 0" class="ml-20 mt-16 mr-40 fz22 text-010">
				<!-- aspectFill  aspectFit-->
					<!-- <view class="w-200 h-200 ml-15"> -->
						<image :src="getImageUrl(itemImg.path)" mode="aspectFit" v-for="itemImg in item.message.img" class="w-200 h-200 ml-15"></image>
					<!-- </view> -->
					
				</view>
			</block>

			<u-empty class="py-50" v-if="comments.length == 0" :text="$t('暂无评价')"></u-empty>


		</view>
		<view class="empty"></view>
		<view class="footer_btn4" v-if="item.user_id">
			<view class="btn_blue" @click="editCard()" style="width: 100%;" v-if="item.user_id == current_user_id">
				{{$t('修改名片')}}
			</view>
			<template v-else>
				<view class="btn_blue" @click="inlineCall(item)">
					{{$t('联系')}}Ta
				</view>
				<view class="btn_yellow" @click="callUser(item)">
					{{$t('打电话')}}
				</view>
			</template>
		</view>
	</view>
</template>

<script>
import { business_info } from '@/api/user.js'
import { transportList, car_brand_search } from '@/api/driver.js'
import { warehouse_index, comment_select } from '@/api/basic.js'
import citySelect from 'pages/publish/components/citySelect.vue';
import { request_minute } from '@/api/basic'

import CarCard from './components/carCard.vue'
export default {
	components: {
		CarCard,
		citySelect
	},
	data() {
		return {
			current_user_id: uni.getStorageSync('user_id'),
			tabIndex: 0,
			siteCity: '',
			siteCityLabel: '',

			user_id: '',
			item: {},

			scoreList: [{
				num: 1
			},
			{
				num: 2
			},
			{
				num: 3
			},
			{
				num: 4
			},
			{
				num: 5
			},
			],
			lang: 'zh',
			wordList: [this.$t('保赔付'), this.$t('速度快'), this.$t('速度快')],
			title: this.$t('报价详情'),
			IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',

			open: false,
			showTel: false,
			content: '',
			allInfo: {},
			cardList: [this.$t('载具资源'), this.$t('服务项目'), this.$t('收费标准'), this.$t('仓储资源'), this.$t('客户保障')],
			current: 0,
			carList: [],
			customServiceList: [this.$t('运踪服务'), this.$t('超时赔付'), this.$t('货物险'), this.$t('运输险')],
			chargeList: [
				{
					text: '类型1',
					key: '0',
					checked: false
				},
				{
					text: '类型1',
					key: '1',
					checked: false
				},
				{
					text: '类型1',
					key: '2',
					checked: false
				}
			],
			advantageList: [
				{
					text: this.$t('报关'),
					key: '1',
					checked: false
				},
				{
					text: this.$t('转关'),
					key: '6',
					checked: false
				},
				{
					text: this.$t('清关'),
					key: '2',
					checked: false
				},
				{
					text: this.$t('运输'),
					key: '3',
					checked: false
				},
				{
					text: this.$t('装卸'),
					key: '5',
					checked: false
				},
				{
					text: this.$t('仓储'),
					key: '4',
					checked: false
				}
			],
			lineList: [
				{
					begin: this.$t('哈尔滨'),
					end: this.$t('莫斯科')
				},
				{
					begin: this.$t('哈尔滨'),
					end: this.$t('莫斯科')
				},
				{
					begin: this.$t('哈尔滨'),
					end: this.$t('莫斯科')
				},
				{
					begin: this.$t('哈尔滨'),
					end: this.$t('莫斯科')
				},
			],
			shadowStyle: {
				backgroundImage: "none",
				paddingTop: "100px",
				marginTop: "-100px",
			},

			stockIndex: 0,
			page2: 1,
			warehouseList: [],
			warehouse_more_text: this.$t('查看更多'),

			columnsEmplState_id: '',
			columnsEmplType: [],
			columnsEmplType_id: '',
			barIndex: 0,
			page: {
				num: 1,
				size: 10,
				time: null,
			},
			driverList: [],
			car_more_text: this.$t('查看更多'),

			comments: []
		}
	},
	onLoad(options) {
		if (uni.getStorageSync('lang')) {
			this.lang = uni.getStorageSync('lang')
		}
		this.user_id = options.u_id
		this.getInfox();
		window.onNativeShow = this.getInfox;
	},
	onShow() {
		
	},
	methods: {
		getImageUrl(url = '') {
			console.log(url)
			if(url.indexOf('://') > -1) {
				return url
			} else {
				return this.IMAGE_URL + url
			}
		},
		getInfox(){
			this.find_info()
			this.brand_search()
			this.get_lists()
			this.stock_lists()
			this.comment()
		},
		callUser(info) {
			if(uni.getStorageSync("user_id") == info.user_id) {
				uni.showToast({
					title: this.$t('不能给自己打电话'),
					icon: "none",
				});
			} else {
				
				request_minute({
					user_id: uni.getStorageSync("user_id"),
					target_id: info.user_id,
				}).then(res => {
					if (res.data.data.flag == 1) {
						this.isMessageGo({
							action: 'call',
							data: {
								userId: info.user_id,
								type: res.data.data.type || 1,
							}
						})
					} else {
						uni.$u.toast('积分不足，请充值积分')
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/vip/scorePoint',
							})
						}, 500)
					}
				})
				
			}
		},
		inlineCall(info) {
			console.log('info---', info)
			this.isMessageGo({
				action: 'initiateChat',
				data: info.user_id
			})
		},
		editCard() {
			uni.navigateTo({
				url: '/pages/forwardingInformation/businessCardInput?u_id=' + this.current_user_id
			})
		},
		previewImage(urls, current) {
			uni.previewImage({
				urls: urls,
				current: current
			})
		},
		image_handle(path) {
			return 'https://gluz-oss.oss-cn-beijing.aliyuncs.com' + path;
		},
		brand_search() {
			var columnsEmplType = []
			var that = this
			car_brand_search({
				barIndex: that.barIndex
			}).then((res) => {
				var arr = res.data.data.data
				for (var i = 0; i < arr.length; i++) {
					columnsEmplType.push({ id: arr[i]['id'], label: arr[i]['title'] })
				}
				that.columnsEmplType = columnsEmplType
			})
		},
		clickCarTabar(index) {
			this.barIndex = index
			this.page = {
				num: 1,
				size: 10,
				time: null,
			}
			this.get_lists()
			this.brand_search()
		},
		confirmStock(index) {
			this.stockIndex = index
			this.page2 = 1
			this.stock_lists()
		},
		openRead() {
			this.open = true
		},
		closeRead() {
			this.open = false
		},
		changeList(index) {
			this.current = index
		},
		back() {
			this.cback()
		},
		find_info() {
			var that = this
			business_info({
				user_id: this.user_id
			}).then(res => {
				that.item = res.data.data
				if (!res.data.data.buy_videos && that.item.shop_image){
					this.tabIndex = 1;
				}
				var service_id = that.item.provide_services_id || '';
				for (var i = 0; i < that.advantageList.length; i++) {
					if (service_id.indexOf(that.advantageList[i]['key']) != '-1') {
						that.advantageList[i]['checked'] = true
					}
				}
			})
		},
		get_lists() {
			var that = this
			var page = this.page
			transportList({
				page: page.num,
				size: page.size,
				user_id: uni.getStorageSync('user_id'), status: that.columnsEmplState_id, car_category_id: that.columnsEmplType_id, mode: that.barIndex
			}).then((res) => {
				if (!res.data.data.data.list) res.data.data.data.list = [];
				if (page.num == 1) this.driverList = [];
				this.driverList = this.driverList.concat(res.data.data.data.list);
				console.log(this.driverList,'xxxxxxxx')

				if (res.data.data.data.list.length == 0) {
					that.car_more_text = this.$t('已经到底了')
				} else {
					that.car_more_text = this.$t('查看更多')
				}
			})
		},
		car_more() {
			var num = this.page.num
			num = num + 1
			this.page = {
				num: num,
				size: 10,
				time: null,
			}
			this.get_lists()
		},
		confirmEmplType(id) {
			this.columnsEmplType_id = id
			this.page = {
				num: 1,
				size: 10,
				time: null,
			}
			this.get_lists()
		},
		stock_lists(address = {}) {
			var that = this
			warehouse_index({
				page: that.page2,
				user_id: uni.getStorageSync('user_id'),
				brand_index: that.stockIndex,
				...address
			}).then((res) => {
				if (!res.data.data.data) res.data.data.data = [];
				if (that.page2 == 1) that.warehouseList = [];
				that.warehouseList = that.warehouseList.concat(res.data.data.data);
				console.log(that.warehouseList);
				if (res.data.data.data.length == 0) {
					that.warehouse_more_text = this.$t('已经到底了')
				} else {
					that.warehouse_more_text = this.$t('查看更多')
				}
			})
		},
		warehouse_more() {
			var that = this
			that.page2 = that.page2 + 1
			that.stock_lists()
		},
		comment() {
			var that = this
			comment_select({
				user_id: this.user_id
			}).then((res) => {
				that.comments = res.data.data.data
			})
		}
	}
}

</script>

<style lang="less">
page {
	background-color: #F6F7FB;
}

.lan {
	background-color: #278AFF !important;
	color: #fff !important;
}

.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
	// padding-top: 18rpx;
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 80rpx;
	left: 30rpx;
	opacity: 1;
	z-index: 10;
}

.bgSty {
	width: 100%;
	height: 636rpx;
	flex-shrink: 0;
	opacity: 0.9;
	z-index: 1;
	position: relative;
}

.cardBox {
	width: 100%;
	// background: #939FC2;
	padding-bottom: 55rpx;
	background: linear-gradient(0deg, #6776A5 0%, rgba(255, 255, 255, 0.00) 100%);
	margin-top: -100rpx;
	z-index: 10;
	position: relative;
}

.cardBlueBg {
	// width: 100%;
	min-height: 130px;
	flex-shrink: 0;
	margin-left: 24rpx;
	margin-right: 24rpx;
	border-radius: 0 0 26rpx 26rpx;
	// background: linear-gradient(0deg, #090132 10.9%, #1B0298 100%);
	background-image: url(/static/bg/carInfoBg.png);
	background-position: 0% 0%;
	background-size: contain;
	background-repeat: no-repeat;

	h3 {
		color: #F9F5EA;
		font-family: "PingFang SC";
		font-size: 36rpx;
		font-style: normal;
		font-weight: 600;
		margin-left: 30rpx;
	}

	p {
		color: #F9F5EA;
		font-family: MiSans;
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		margin-top: 16rpx;
	}

	.img1 {
		width: 127rpx;
		height: 34rpx;
		margin-top: 16rpx;
	}

	.img2 {
		height: 28rpx;
		width: 67rpx;
		margin-top: 16rpx;
	}
}

.cardYellowBg {
	width: 100%;
	height: 336rpx;
	// margin-left: 24rpx;
	// margin-right: 24rpx;
	flex-shrink: 0;
	border-radius: 26rpx;
	background: linear-gradient(212deg, #FFF6E3 -20.1%, #FFF4D6 19.63%, #FFFBF3 124.38%);

	// margin-top: -70rpx;
	.numSty {
		color: #1D1D1D;
		font-weight: 600;
		font-size: 38rpx;
	}

	.titleSty {
		font-size: 22rpx;
		color: #8C8C8C;
	}
}

.busiIntro {
	margin-top: -30rpx;
	border-radius: 26rpx 26rpx 0 0;
	position: relative;
	z-index: 12;
}

.readMoreSty {
	position: relative;

	/deep/ .u-read-more__toggle {
		justify-content: flex-end !important;
	}

	/deep/ .u-text__value {
		font-size: 28rpx !important;
		color: #278AFF;
	}

	/deep/ .u-read-more__content {
		font-size: 24rpx;
		line-height: 56rpx;
		color: #535353;
		// height: auto !important;
		text-indent: 0 !important;
		min-height: 40rpx;
	}

	/deep/ .u-read-more__toggle__text {
		width: 80rpx;
		height: 28rpx;
		position: absolute;
		background-color: #fff;
		bottom: 16rpx;
	}
}

.readMoreOpen {
	/deep/ .u-read-more__content {
		height: auto !important;
	}

	/deep/ .u-read-more__toggle__text {
		bottom: -20rpx;
	}
}

.cityBox {
	width: 284rpx;
	height: 80rpx;
	border-radius: 500rpx;
	background: #F7F7F7;
	line-height: 80rpx;
}

.watchMore {
	color: #8C8C8C;
	font-family: "PingFang SC";
	font-size: 26rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 26rpx;
	/* 100% */
	text-align: center;
	margin-top: 30rpx;
	padding-bottom: 30rpx;
}

.cardSty {
	// margin-top: 27rpx;
	color: #1D1D1D;
	font-family: "PingFang SC";
	font-size: 28rpx;
	font-style: normal;
	line-height: 28rpx;
	/* 100% */
}

.activeCard {
	color: #1D1D1D;
	font-family: "PingFang SC";
	font-size: 34rpx;
	font-style: normal;
	font-weight: 600;
	line-height: 34rpx;
	position: relative;

	/* 100% */
	&:before {
		content: '';
		display: block;
		width: 100%;
		height: 15rpx;
		background: linear-gradient(to right, #3C8DF8, rgba(185, 222, 246, 0.5));
		position: absolute;
		bottom: -10rpx;
		left: 0;
	}
}

uni-button {
	margin-right: 0 !important;
}

uni-button:after {
	// margin-right: 0 !important;
	border: none !important;
}

.common {
	width: 150rpx;
	height: 64rpx;
	border-radius: 500rpx;
	background: #F7F7F7;
	color: #1D1D1D;
	font-family: "PingFang SC";
	font-size: 24rpx;
	font-style: normal;
	font-weight: 400;
	line-height: center;
	margin-left: 20rpx;
	border: none;
}

.common:first-child {
	margin-left: 0;
}

// .common:first-child {
// 	margin-left: 0;
// }
// .common:nth-child(5) {
// 	margin-left: 0;
// }
// .common:nth-child(n+5):nth-child(-n+7) {
// 	margin-top: 16rpx;
// }
.checkedSty {
	border: 1rpx solid #278AFF;
	background: #D7E9FF;
	color: #278AFF;
	font-weight: 600;
}

.customBlueBg {
	height: 128rpx;
	flex-shrink: 0;
	margin-left: 34rpx;
	margin-right: 34rpx;
	border-radius: 18rpx;
	background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
	color: #FFF;
	font-family: "PingFang SC";
	font-size: 28rpx;
	font-style: normal;
	font-weight: 600;
	line-height: 78rpx;
	/* 100% */
}

.customDarkBg {
	margin-left: 32rpx;
	margin-right: 32rpx;
	height: 202rpx;
	flex-shrink: 0;
	border-radius: 18rpx;
	background: #F7F7F7;
	margin-top: -50rpx;
}

.carKindSty {
	// width: 100%;
	flex-wrap: nowrap;
	overflow-x: auto;
	flex: 1;
}

.kindTextSty {
	width: 100rpx;
	height: 48rpx;
	flex-shrink: 0;
	background-color: #F7F7F7;
	color: #8C8C8C;
	font-family: "PingFang SC";
	font-size: 24rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 48rpx;
	/* 100% */
	text-align: center;
	border-radius: 10rpx;
	transform: skewX(-5deg);
}

.empty {
	width: 100%;
	height: 200rpx;
}

.footer_btn4 {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	padding: 30rpx 24rpx 60rpx;
	z-index: 999;
	box-shadow: 0 -10rpx 10rpx rgba(0, 0, 0, 0.05);

	.btn_yellow {
		width: 338rpx;
		height: 94rpx;
		flex-shrink: 0;
		border-radius: 500rpx;
		// border: 2rpx solid rgba(241, 122, 3, 0.10);
		background: linear-gradient(90deg, #FF811E 0%, #FFBE7C 100%);
		color: #FFF;
		font-family: "PingFang SC";
		font-size: 32rpx;
		font-style: normal;
		font-weight: 600;
		text-align: center;
		line-height: 94rpx;
	}

	.btn_blue {
		width: 338rpx;
		height: 94rpx;
		flex-shrink: 0;
		border-radius: 500px;
		// border: 2rpx solid rgba(3, 189, 130, 0.10);
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color: #FFF;
		font-family: "PingFang SC";
		font-size: 32rpx;
		font-style: normal;
		font-weight: 600;
		text-align: center;
		line-height: 94rpx;
	}
}

.busiSty {
	display: flex;
	justify-content: flex-start;
	margin-top: 34rpx;

	image {
		width: 82rpx;
		height: 82rpx;
		margin-left: 34rpx;
	}

	p {
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-weight: 600;
		color: #1D1D1D;
		line-height: 82rpx;
		margin-left: 16rpx;
	}
}

.wordSty {
	width: 168rpx;
	height: 64rpx;
	flex-shrink: 0;
	border-radius: 500rpx;
	background: #F7F7F7;
	color: #333;
	font-family: "PingFang SC";
	font-size: 24rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 64rpx;
	/* 116.667% */
	text-align: center;
	margin-left: 20rpx;
}

.infoSty {
	width: 330rpx;
	// height: 148rpx;
	flex-shrink: 0;
	border-radius: 0 0 18rpx 18rpx;
	background: #F7F7F7;
	margin-top: -22rpx;
	padding-bottom: 22rpx;

	.title {
		color: #8C8C8C;
		font-family: "PingFang SC";
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 20rpx;
		/* 100% */
	}

	.price {
		color: #1D1D1D;
		font-family: "PingFang SC";
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 20rpx;
		/* 100% */
	}
}

.media-tab {
	display: flex;
	margin-right: 30rpx;
	border: 1rpx solid #7467a7;
	border-radius: 10rpx;
	overflow: hidden;

	.item {
		font-size: 26rpx;
		padding: 10rpx 20rpx;
	}

	.active {
		background-color: #fff;
		color: #14196b;
	}
}
</style>